<template>
  <div>
    <el-container>
      <el-header style="display: flex; justify-content: space-between">
        <el-radio-group v-model="radio1" size="large">
          <el-radio-button label="销量" />
          <el-radio-button label="销售额" />
        </el-radio-group>
        <el-select
          v-model="value"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-header>
      <el-main>
        <Mypie :data="pieData" />
        <Mymap />
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, toRefs, watch } from "vue";
import * as http from "@/request/http";
import { PieSeriesOption } from "echarts";
const radio1 = ref("销量");
const salePieVal=ref()
interface IIndexData {
  pieData: PieSeriesOption[];
  mapData: any;
}
const indexData: IIndexData = reactive({
  pieData: [],
  mapData: [],
});
const value = ref('yesterday')

const options = [
  {
    value: 'yesterday',
    label: '昨天',
  },
  {
    value: 'today',
    label: '今天',
  },
  {
    value: 'three_days',
    label: '前3天',
  },
  {
    value: 'seven_days',
    label: '前7天',
  },
  {
    value: 'thirty_days',
    label: '前13天',
  },
  {
    value: 'sixty_days',
    label: '前16天',
  },
]
// 数据处理
function initdataFn(salePie: ISalePie[]) {
  indexData.pieData = salePie.map((item) => ({
    value: item[`${radio1.value=='销量'?'sale_':''}${value.value}${radio1.value=='销售额'?'_money':''}`],
    name: item.name,
  })) as PieSeriesOption[];
}
console.log(`${radio1.value=='销量'?'sale_':''}${value.value}${radio1.value=='销售额'?'_money':''}`);

const { pieData, mapData } = toRefs(indexData);
http.chart.AdminStat().then((res) => {
  console.log(res);
  salePieVal.value=res.data.salePie
  initdataFn(res.data.salePie);
});
watch([()=>radio1.value,()=>value.value],()=>{
  initdataFn(salePieVal.value)
})
</script>

<style lang="less" scoped>
#chinaChart {
  width: 100%;
  height: 800px;
  border: 1px solid #999;
}
</style>
